import React from 'react';
import {Button} from 'antd';
import {observer} from "mobx-react";
import {WeaDialog, WeaLocaleProvider, WeaTextarea} from 'ecCom';
import {observable} from "mobx";
import { OTHER } from "../../../constants/form";
import "./index.less";

const {getLabel} = WeaLocaleProvider;

@observer
export default class BatchEdit extends React.Component {
  @observable options = '';
  @observable initOptions = '';

  constructor(props) {
    super();
  }

  componentWillReceiveProps(nextProps, nextContext) {
    const {options} = nextProps;
    let optionsText = '';
    options && options.forEach(o => {
      o.showname && o.key != OTHER && (optionsText += o.showname + "\n");
    });
    this.options = optionsText;
    this.initOptions = optionsText;
  }

  handleChange = (value) => {
    this.options = value;
  };

  onSave = () => {
    const {onSave, onVisibleChange} = this.props;
    if (this.options == this.initOptions) {
      onVisibleChange(false);
    } else {
      onSave(this.options);
    }
  };

  render() {
    const {visible, onVisibleChange} = this.props;
    return (
      <WeaDialog ecId={`${this && this.props && this.props.ecId || ''}_WeaDialog@9r7jq7`}
        title={getLabel('511649','批量编辑')}
        icon={"icon-coms02-Data-center"}
        iconBgcolor="#1a57a0"
        hasScroll
        className={'wea-edc-opt-batchEdit'}
        visible={visible}
        onCancel={() => onVisibleChange(false)}
        style={{width: 600, height: 400}}
        buttons={[
          <Button ecId={`${this && this.props && this.props.ecId || ''}_Button@mvx4p2@onSave`} type='primary' onClick={this.onSave}>{getLabel('826', '确定')}</Button>,
          <Button ecId={`${this && this.props && this.props.ecId || ''}_Button@ybr5nl@VisibleChange`} onClick={() => onVisibleChange(false)}>{getLabel(31129, '取消')}</Button>,
        ]}
      >
        <p style={{ padding: '20px 20px', fontSize: '14px', color: '#333' }}>{getLabel('511648','每个选项请单列一行，单个选项长度不能超过1000个字')}</p>
        <WeaTextarea ecId={`${this && this.props && this.props.ecId || ''}_WeaTextarea@z3ickb`} style={{padding: '0px 20px', height: 300 }} viewAttr={2} value={this.options} onChange={this.handleChange} />
      </WeaDialog>
    );
  }
};
